<template>
    <div class="comments-item">
        <div class="fl">
            <a><user-head></user-head></a>
        </div>
        <div class="comments-content">
            <div class="comment-trigger">
                <comment-option class="fr"></comment-option>
                <a>DwyaneWade</a>
                <a class="radius"></a>
                <a>1天前</a>
            </div>
            <div class="clearfix mb10">
                <p>实际上D3不是必要的吧,只要里边有若干个样式里有--n的span就可以 了.</p>
            </div>
            <p class="comment-ops">
                <a class="comments-zan">
                    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                    <span>赞</span>
                    <span class="comments-zan-value">+1</span>
                </a>
                <a class="ml15">回复</a>
            </p>
            <div class="reply-list">
                <div class="reply-item">
                    <a class="fl">
                        <span class="comments-zan-value mr10">0</span>
                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                    </a>
                    <div class="reply-content">
                        <div class="display-inline-block mb10">
                            <p>是的，写 15 次 --n 也行。</p>
                        </div>
                        <br>
                        <div class="display-inline-block">
                            <span class="comment-trigger inline-block">
                                <span> — </span>
                                <a>DwyaneWade</a>
                                <a class="radius"></a>
                                <a>1天前</a>
                            </span>
                            <comment-option class="ml15"></comment-option>
                        </div>
                    </div>
                </div>
                <div>
                    <template></template>
                    <el-button size="small" type="text">添加回复</el-button>
                    <template></template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import UserHead from '../common/UserHead'
import CommentOption from './CommentOption'

export default {
    name: 'comment-list',
    components: {
        UserHead,
        CommentOption
    }
}
</script>

<style lang="scss" scoped>
$color: #999;
.comments-item {
    padding: 15px 0;
    .comments-content {
        padding-left: 47px;
    }
}
.comment-trigger {
    margin-bottom: 10px;
    .radius:before {
        content: "·";
    }
    .radius {
        margin: 0 5px;
        color: $color;
    }
    a:last-child {
        color: $color;
    }
}
.comment-ops {
    font-size: 13px;
    color: $color;
    .comments-zan {
        i {
            margin-right: 4px;
        }
        .comments-zan-value {
            margin-left: 4px;
            color: #42b983;
        }
    }
}
.reply-list {
    margin-top: 10px;
    font-size: 13px;
    background-color: #FAFAFA;
    padding: 0 10px;
    color: #666;
    .reply-item {
        padding-bottom: 10px;
        padding-top: 10px;
        border-bottom: 1px dashed rgba(0,0,0,0.09);
        word-break: break-word;
        .reply-content {
            margin-left: 40px;
        }
    }
}
</style>